<!--商城列表-->
<template>
  <div class="all" @rightBtn="shareClick">
    <template v-if="versions">

      <scroller class="all bg1">
        <div>
          
          <!--头部-->
          <div class="head bg2">

            <div class="row acenter">
              <text class="font30 text1">{{T(data.strategyName)}}</text>
              <div :class="['type', false ? 'type-hong' : '']">
                <text :class="['font22', false ? 'udRed-t1' : 'main-t1']">{{false ? T('合约') : T('币币')}}</text>
              </div>
              <div class="all"></div>
              <text class="font20 text1">{{T('剩余可售&{1}单').replace("&{1}", data.stocks)}}</text>
            </div>

            <div class="height5"></div>
            <text class="font22 text2">{{T('策略编码')+'：'+data.strategyCode}}</text>

            <div class="height10"></div>
            <text class="font22 text2">{{T(data.strategyGuide)}}</text>

            <div class="height40"></div>
            <div class="row">
              <div class="all acenter">
                <text class="font26 text1">{{data.cumulativeInvestment + 'BTC'}}</text>
                <div class="height10"></div>
                <text class="font22 text2">{{T('累计投入')}}</text>
              </div>

              <div class="line-head bg3"></div>
              <div class="all acenter">
                <text class="font26 text1">{{data.cumulativeIncome + 'BTC'}}</text>
                <div class="height10"></div>
                <text class="font22 text2">{{T('累计收益')}}</text>
              </div>

              <div class="line-head bg3"></div>
              <div class="all acenter">
                <text :class="['font26', Config.upDown(data.expectedAnnual)]">{{data.expectedAnnual+'%'}}</text>
                <div class="height10"></div>
                <text class="font22 text2">{{T('预期年化')}}</text>
              </div>
            </div>
          </div>
          
          <!-- 导航栏 -->
          <div class="menu bg2">
            <div class="nav-but"  @click="tabIndex = 0">
              <text :class="['font26', tabIndex == 0 ? 'text1' : 'text2']">{{T("介绍")}}</text>
              <div :class="['nav-line', (tabIndex == 0 ? 'main1' : '')]"></div>
            </div>
            <div class="nav-but" @click="tabIndex = 1">
              <text :class="['font26', tabIndex == 1 ? 'text1' : 'text2']">{{T("概况")}}</text>
              <div :class="['nav-line', (tabIndex == 1 ? 'main1' : '')]"></div>
            </div>
          </div>
          <div class="content bg2" v-if="tabIndex == 0">
            <!--策略介绍-->
            <text class="font26 text1">{{T('策略介绍')}}</text>
            <div class="height10"></div>
            <text class="font22 text2">{{T(data.strategyGuide)}}</text>
          </div>
          <template v-else>
            <div class="content bg2">
              <!--概况-->
              <div class="height20"></div>
              <text class="font26 text1">{{T('概况')}}</text>
              <div class="list bk2">
                <div v-for="(item, index) in basics" v-bind:key="'basic'+index">
                  <div class="cell">
                    <text class="font22 text2 width230">{{T(item.title)}}</text>
                    <div class="width40"></div>
                    <text class="font22 text1 all">{{item.text}}</text>
                    <div class="cell-column-list bg3"></div>
                  </div>
                  <div class="cell-row-list bg3" v-if="index < (basics.length - 1)"></div>
                </div>
              </div>
              
              <!--账户-->
              <div v-for="(as, i) in accounts" v-bind:key="'aaccount'+i">
                <div class="height10"></div>
                <text class="font26 text1">{{T('账户')+' '+ (i+1)}}</text>
                <div class="list bk2">
                  <div v-for="(item, j) in as" v-bind:key="'aaccount'+i+j">
                    <div class="cell">
                      <text class="font22 text2 width230">{{T(item.title)}}</text>
                    <div class="width40"></div>
                      <text class="font22 text1 all">{{item.text}}</text>
                    <div class="cell-column-list bg3"></div>
                    </div>
                    <div class="cell-row-list bg3" v-if="j < (as.length - 1)"></div>
                  </div>
                </div>
              </div>
              
              <!--参数-->
              <div class="height10"></div>
              <text class="font26 text1">{{T('参数')}}</text>
              <div class="list bk2">
                <div v-for="(item, index) in reserves" v-bind:key="'reserve'+index">
                  <div class="cell">
                    <text class="font22 text1 width230">{{T(item.name)}}</text>
                    <div class="width40"></div>
                    <div class="cell-column-list bg3"></div>
                    <text class="font22 text1 all">{{T(item.comment)}}</text>
                  </div>
                  <div class="cell-row-list bg3" v-if="index < (reserves.length - 1)"></div>
                </div>
              </div>
              
              <!--版本-->
              <div class="height10"></div>
              <text class="font26 text1">{{T('版本')}}</text>
              <div v-for="(item, index) in versions" v-bind:key="'versions'+index">
                <div class="height20"></div>
                <div class="cell-row-list bg3"></div>
                <div class="height20"></div>
                <div class="row acenter">
                  <text :class="['font26', 'all', item.warning ? 'warning-t1' : 'text1']">{{T('版本')+' '+item.version}}</text>
                  <text :class="['font26', 'all', item.warning ? 'warning-t1' : 'text1']">{{item.versionInfo}}</text>
                  <text class="font22 text2 tRight all">{{item.createTime}}</text>
                </div>
              </div>
            </div>

            <!--提示-->
            <div class="tipe">
              <text class="font26 text1">{{T('官方提示')}}</text>
              <div class="height10"></div>
              <text class="font22 text2">{{T('策略商城提供第三方的策略展示和购买，请您确认在购买前已充分理解‘买卖自负’的市场原则，充分认识到策略交易潜在的交易风险，自行承担交易结果。')}}</text>
              <text class="font22 text2">{{T('任何由于购买的量化策略带来资金缩水或损失风险，Vtrading不担负任何责任，请您谨慎选择，合理投资。')}}</text>
            </div>
          </template>
        </div>
      </scroller>
      
      <!--底部-->
      <div class="foot bg2" v-if="versions">

        <div class="row aend all">
          <text class="font30 text2">{{data.price}}</text>
          <text class="font26 text2 text" v-if="data.price < data.origPrice">{{' '+data.origPrice+' '}}</text>
          <text class="font26 text2">{{' VTN/'+T('月')}}</text>
          <text class="font22 text2">{{' '+data.isVtnEquity ? T('含提现权益') : T('免提现权益')}}</text>
        </div>

        <!--已下架-->
        <template v-if="!data.soldOut">
          <div class="but">
            <text class="font26 no-t1">{{T('已下架')}}</text>
          </div>
        </template>

        <!--已购买 未过期-->
        <template v-else-if="data.isBuy && !data.isExpire">
          <div class="but" @click="buyClick(false)">
            <text class="font26 main-t1">{{T('续费')}}</text>
          </div>
        </template>
        
        <!--未购买、已购买，且过期-->
        <template v-else>
          <div class="but main1" v-if="data.onTrial > 0" @click="trialClick">
            <text class="font26 text1">{{T('免费&{1}天').replace("&{1}", data.onTrial)}}</text>
          </div>

          <div class="widht10"></div>
          <div class="but" @click="buyClick(true)">
            <text class="font26 main-t1">{{T('立即购买')}}</text>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
/*****************头部*/
.head {
  padding: 30px;
  margin-top: 10px;
  margin-bottom: 20px;
}
.line-head {
  width: 2px;
  height: 72px;
}
.type {
  justify-content: center;
  align-items: center;
  background-color: rgba(22, 119, 254, 0.1);
  height: 32px;
  padding-left: 10px;
  padding-right: 10px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;

  margin-left: 20px;
}
.type-hong{
  background-color: rgba(252, 97, 128, 0.1);
}

/**************** 菜单栏 */
.menu{
  flex-direction: row;
  padding-top: 30px;
}
.nav-but{
  align-items: center;

  padding-left: 30px;
  padding-right: 30px;
}
.nav-line{
  width:30px;
  height: 4px;
  border-radius: 4px;
  margin-top: 10px;
}

/*****************内容*/
.content {
  padding: 30px;
}
.list {
  border-width: 1px;

  margin-top: 10px;
  margin-bottom: 10px;
}
.cell {
  flex-direction: row;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 20px;
  padding-right: 20px;
}
.cell-column-list {
  position: absolute;
  width: 1px;
  top: 0;
  bottom: 0;
  left: 270;
}
.cell-row-list {
  height: 1px;
}

/*****************提示*/
.tipe {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 40px;
  padding-bottom: 60px;
}

/*****************菜单*/
.foot {
  flex-direction: row;
  align-items: center;
  padding-top: 50px;
  padding-bottom: 36px;
  padding-left: 30px;
  padding-right: 10px;

  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.3), 0px 2px 7px 0px rgba(52, 52, 52, 0.3);
}
.but {
  justify-content: center;
  align-items: center;
  height: 52px;
  border-radius: 4px;

  padding-left: 20px;
  padding-right: 20px;
}
.text {
  text-decoration:line-through;
}

/*****************间距*/
.height5 {
  height: 5px;
}
.width230 {
  width: 230px;
}
</style>

<script>
import jnavigator from "@/_js/navigator";
import jmodal from "@/_js/modal";
import jconfig from "@/_js/config";
import jmath from "@/_js/math";
import jhttps from "@/_js/https";
import jtime from "@/_js/time";

const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T("策略详情"));
weexFunction.setRightBtn(T('分享'));

export default {
  
  data() {
    return {
      T: T,
      Config:jconfig,
      tabIndex:0, //1介绍 2概况

      strategyId:'',
      data:undefined,
      versions:undefined,
      basics:[], //基础数据表
      accounts:[], //基础数据表
      reserves:[], //参数
    };
  },

  mounted() {

    var param = weex.config;
    this.strategyId = param.strategyId;

    jconfig.init(()=>{
      this.httpShopInfo();
    },[jconfig.OPT_UP_DOWN]);
  },

  methods: {

    initData(data) {

      var configure = data.configure;
      var reserves = configure.reserves;
      var tradePairs = configure.tradePairs;

      //概况
      var apiNum = (tradePairs.count > 1) ? 
                  T("1~&{1}个").replace("&{1}", tradePairs.count): 
                  T("&{1}个").replace("&{1}", 1);

      var coinNum = 0;
      for (let index = 0; index < tradePairs.length; index++) {
        var pair = tradePairs[index];
        if (pair.invest == 1) {
            coinNum += 2;
        } else if (pair.invest != 2) {
            coinNum += 1;
        }
      }
      coinNum = T("&{1}个").replace("&{1}", coinNum);

      var reserve = T("&{1}个").replace("&{1}", reserves.length)

      this.basics = [{'title':T('单币种投入限制'), 'text':T("价值 &{1} USDT").replace("&{1}", data.maxInvest)},
                    {'title':'API数量', 'text':apiNum},
                    {'title':'投入币种数量', 'text':coinNum},
                    {'title':'参数数量', 'text':reserve}];


      //账户
      var accounts = [];
      for (let index = 0; index < tradePairs.length; index++) {
        var pair = tradePairs[index];
        var investType;
        switch (pair.invest) {
          case 1:
            investType = T('可投入');
            break;
          case 2:
            investType = T('不可投入');
            break;
          case 3:
            investType = T('本币可投入');
            break;
        
          default:
            investType = T('可投入');
            break;
        }
        var account = [{'title':'交易所限制', 'text':T('无')},
                      {'title':'投入类型', 'text':investType},
                      {'title':'是否指定交易对', 'text':T('否')},
                      {'title':'说明', 'text':pair.comment}];
        accounts.push(account);
      }
      this.accounts = accounts;

      //参数
      this.reserves = reserves;

      return data;
    },

    /********************************* HTTP*/
    //http商品详情
    httpShopInfo() {

      var param = {'strategyId':this.strategyId};
      jhttps.post("workShop/queryShopStrategyDetail", param,true,(data) => {

        if (data.status == 200) {
          data = data.data;
          this.data = this.initData(data);
          this.httpVersionInfo();
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    //http版本信息
    httpVersionInfo() {

      var param = {'strategyId':this.strategyId};
      jhttps.post("workShop/queryStrategyExplainDetail", param,true,(data) => {
        if (data.status == 200) {
          data = data.data;

          var versions = data.shopHistoryList;
          for (let index = 0; index < versions.length; index++) {

            var data1 = versions[index];
            data1.createTime = jtime.getTime(data1.createTime);

            if (index < versions.length - 1) {
              var data2 = versions[index + 1];
              data1.warning = (jmath.jian(data1.version, data2.version, 0, 2) > 0);
            } else {
              data1.warning = false;
            }
          }
          this.versions = versions;
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    //http免费试用
    httpTrial () {

      jmodal.showLoad();
       var param = {'strategyId':this.strategyId};
      jhttps.postX("tradeV2/freeBuyStrategy", param,true,(data) => {
        jmodal.hideLoad();
        if (data.status == 200) {
          this.data.isBuy = true;
          this.data.isExpire = false;
          jmodal.toast(T('免费购买成功'));
        } else {
          jmodal.toast(data.msg);
        }
      });
    },
    
    /********************************* 点击*/
    //分享
    shareClick() {

      var free = this.data.onTrial > 0;
      var param = {"strategyName":this.data.strategyName,
                  "strategyCode":this.data.strategyCode,
                  "expectedAnnual":this.data.expectedAnnual,
                  "describe":this.data.describe,
                  "origPrice":this.data.origPrice,
                  "price":this.data.price,
                  "free":free};
      weexFunction.shareWeex('share/ShareShop', {'param':param});
    },

    //免费试用
    trialClick() {

      if (!jconfig.forceLogin())return;

      if (this.data.isBuy && this.data.stocks == 0) {
        jmodal.toast(T('策略使用人数已达上限'));
        return;
      }
      this.httpTrial();
    },

    //购买
    buyClick(isBuy) {
      var param = {'strategyId':this.strategyId, 
                   'isBuy':isBuy};
      jnavigator.open('', 'shop/ShopBuy', param);
    }
  },
};
</script>
